/* ----- COLOR STYLING -----*/
@layer legacy {

    a.homepage:link,
    a.homepage:visited {
        --hmpg-bg: var(--c-60);
        --hmpg-clr: var(--c-10);
        --hmpg-brdr: var(--c-50);
        --hmpg-hvr-bg: var(--c-80);
        --hmpg-shd: #00000088;
        --hmpg-hvr-clr: var(--c-a);
        --hmpg-brdr-hvr: var(--c-a);
        --hmpg-shd-hvr: var(--c-a);
        position: fixed;
        top: 0;
        left: 0;
        color: var(--hmpg-clr);
        background-color: var(--hmpg-bg);
        padding: 0.5rem;
        box-shadow: 0 0 0.2rem var(--hmpg-shd);
        z-index: 10;
        text-decoration: none;
        font-weight: bold;
        font-family: system-ui, sans-serif;
        /* border-bottom: solid 0.2rem var(--hmpg-brdr);
        border-right: solid 0.2rem var(--hmpg-brdr); */
        border-left: solid 0.4rem var(--c-a);
        transition: all 0.2s;
    }

    a.homepage:link:hover,
    a.homepage:visited:hover {
        box-shadow: 0 0 0.5rem var(--hmpg-shd-hvr);
        background-color: var(--hmpg-hvr-bg);
        color: var(--hmpg-hvr-clr);

        border-bottom: solid 0.2rem var(--hmpg-brdr-hvr);
        border-right: solid 0.2rem var(--hmpg-brdr-hvr);
    }
    [class|="theme-switch"] {
        display: var(--theme-switch-display);
        position: fixed;
        top: 0;
        left: 0;
        padding: 0.5rem;
        cursor: pointer;
        --swtch-bg: var(--c-40);
        --swtch-clr: var(--c-10);
        --swtch-brdr: var(--c-50);
        --swtch-hvr-bg: var(--c-80);
        --swtch-shd: var(--c-100);
        --swtch-hvr-clr: var(--c-a);
        --swtch-brdr-hvr: var(--c-a);
        --swtch-shd-hvr: var(--c-a);
        color: var(--swtch-clr);
        background-color: var(--swtch-bg);
        box-shadow: 0 0 0.2rem var(--swtch-shd);
        text-decoration: none;
        font-weight: bold;
        font-family: system-ui, sans-serif;
        /* border-bottom: solid 0.2rem var(--swtch-brdr);
        border-right: solid 0.2rem var(--swtch-brdr); */
        transition: all 0.2s;
    }

    .theme-switch-right {
        right: 0;
        left: auto;
    }

    .theme-switch-bottom {
        top: 2.5rem;
        border-right: solid 0.2rem var(--swtch-brdr);
        border-left: none;
    }

    .theme-switch:hover {
        /* box-shadow: 0 0 0.5rem var(--swtch-shd-hvr); */
        background-color: var(--swtch-hvr-bg);
        color: var(--swtch-hvr-clr);

        /* border-bottom: solid 0.2rem var(--swtch-brdr-hvr); */
        border-right: solid 0.2rem var(--swtch-brdr-hvr);
    }

    .homepage+.theme-switch {
        right: auto;
        left: 0;
        padding-left: 5rem;
        z-index: 0;
        z-index: 9;
        /* border-right: solid 0.2rem var(--swtch-brdr); */
    }

    .homepage+.theme-switch:hover {
        border-right: solid 0.2rem var(--swtch-brdr-hvr);
    }

    #thm-sw {
        /* position: fixed;
    inset: 0 0 auto auto;
    z-index: 2; */
        /* display: initial; */
        appearance: none;
        /* position: absolute; */
    }

    html:has(#thm-sw:checked) {
        /* --c-100: var(--cl-100);
        --c-95: var(--cl-95);
        --c-90: var(--cl-90);
        --c-80: var(--cl-80);
        --c-75: var(--cl-75);
        --c-70: var(--cl-70);
        --c-60: var(--cl-60);
        --c-50: var(--cl-50);
        --c-40: var(--cl-40);
        --c-30: var(--cl-30);
        --c-20: var(--cl-20);
        --c-10: var(--cl-10);
        --c-a: var(--cl-a);
        --c-a-light: var(--cl-a-light);
        --c-a-dark: var(--cl-a-dark);
        --cl-a: #f9bb3d;
        --c-a-light: #ffd98e;
        --c-a-dark: #976020;
        --c-a2: var(--cl-a-light);
        --c-b: var(--cl-b2); 
        --c-b2: var(--cl-a-dark);
        transition: all 0.1s ease-in-out;

        --cl-100: #f4f4f4;
        --cl-95: #EAEAEB;
        --cl-90: #D6D5D7;
        --cl-80: #C1BFC4;
        --cl-70: #ACAAB0;
        --cl-60: #98959C;
        --cl-50: #838088;
        --cl-40: #6F6B74;
        --cl-30: #5A5660;
        --cl-20: #45404D;
        --cl-10: #312B39;
        --cl-a: #f9bb3d;
        --cl-a-light: #ffd98e;
        --cl-a-dark: #d6862b; */
        color-scheme: light;
    }


    /* ----- /////////////////////
         Lightbox stuff
          /////////////////////
         -----*/
    /* 

<label class="thumbnail-default" for="IDHERE">
    <img src="URLHERE" alt="">
</label>
<input id="IDHERE" type="checkbox">

<div class="lightbox-default">
    <div class="lightbox-default-inner">
    <img loading="lazy" src="URLHERE" alt="">
    </div>
  <label class="lightbox-default-bg" for="IDHERE"></label>
</div>

WITHOUT SIDE ANNOTATIONS

<label class="thumbnail-default" for="IDHERE">
    <img src="URLHERE" alt="">
</label>
<input id="IDHERE" type="checkbox">

<div class="lightbox-default">
    <div class="lightbox-default-inner">
    <img loading="lazy" src="URLHERE" alt="">
    <div class="overlay-details-box">
        <a href="03November4---22-45-04-Screenshot.jpg" target="_blank">Open full-res in new
            tab</a>
        <p>03November2024---22-45-04-Screenshot.jpg</p>
        <p>description</p>
    </div>
    </div>
  <label class="lightbox-default-bg" for="IDHERE"></label>
</div>




replace imgbtn with .thumbnail-default 
and lightbox 3 times to lightbox-default


*/
    .thumbnail-default {
        cursor: pointer;
        position: relative;
        /* height: fit-content; */
        /* overflow: hidden; */
        /* ^ were causing positioning issues */

        transition: transform .2s ease-in-out;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--c-dark);
        text-shadow: 0 0.1rem 0.2rem var(--c-mid);
        text-shadow: 0 0.1rem 0.2rem var(--c-50);
        --day-opacity: 0;
    }

    .thumbnail-default .caption {
        position: absolute;
        inset: auto 0 0 0;
        background-color: #1c1e25d9;
        padding: 0.5rem;
        color: var(--c-40);
        max-height: 30%;
        overflow: auto;
        scrollbar-width: thin;
        opacity: 1;
        transition: opacity 0.3s;
    }

    .caption:empty {
        display: none;
    }



    .thumbnail-default:has(.caption):hover .caption {
        opacity: 0;
    }

    .thumbnail-default .group-mini-thumbs {
        position: absolute;
        right: 0;
        object-fit: cover;
        top: 0;
        display: flex;
        justify-content: end;
        align-items: end;
        flex-direction: column;
    }

    .thumbnail-default .group-mini-thumbs>* {
        max-width: 2rem;
    }

    .thumbnail-default:has(.gore-toggle) .group-mini-thumbs img {
        filter: blur(var(--gore-blur));
    }

    .thumbnail-default:has(.sens-toggle) .group-mini-thumbs img {
        filter: blur(var(--sens-blur));
    }


    input[type="checkbox"],
    input[type="radio"] {
        display: none;
    }

    input:checked+.lightbox-default,
    .lightbox-default+input:checked {
        opacity: 1;
        visibility: visible;
        display: var(--display-var);
    }

    .lightbox-default {
        --display-var: flex;
        opacity: 0;
        visibility: hidden;
        position: fixed;
        inset: 0;
        z-index: 5;
        display: none;
        place-items: center;
        place-content: center;
    }

    .lightbox-default-bg {
        background: rgba(0, 0, 0, .9);
        /* position: absolute; */
        position: fixed;
        inset: 0;
        cursor: pointer;
        z-index: 6;
    }

    .lightbox-default-inner img {
        object-fit: contain;
        max-height: 100%;
        margin: auto;
    }

    .lightbox-default-inner,
    .lightbox-default-inner-full {
        /* position: absolute; */
        /* inset: 0; */
        /* display: flex;
    place-content: center;
    place-items: center; */
        z-index: 7;
        /* new V */
        overflow: auto;
        max-height: 90dvh;
        width: 80%;
        width: 90%;
        height: 90%;
        margin: auto;
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 0.5rem;
        scrollbar-width: thin;
        color: var(--c-midlight);
        color: var(--c-20);
        background: var(--c-middark);
        background: var(--c-90);
        position: relative;
        /* 12-jul-2025 to fix the 3k px overflowing issue */
        grid-template-rows: 90dvh;

        &.no-details,
        &.overlay-details {
            grid-template-columns: 1fr;

        }
    }

    /* .lightbox-default-inner:has(.overlay-details-box):hover .overlay-details-box{ */
    /* .overlay-details-box:hover{
        opacity: 0;
    } */
    .overlay-details-box {
        display: grid;
        grid-template-columns: 2fr 8fr;
        grid-template-rows: auto auto;
        position: absolute;
        inset: auto 0 0 0;
        background-color: #1c1e25d9;
        color: var(--c-40);
        max-height: 30%;
        scrollbar-width: thin;
        opacity: 1;
        transition: opacity 0.3s;
        overflow: auto;
        opacity: .90;

        & a,
        & p {
            display: flex;
            place-items: center;
            justify-content: center;
        }

        & a {
            padding: 0.5rem;
            background-color: var(--c-50);
            color: var(--c-70);
            text-decoration: none;
            font-weight: bold;
            grid-row: span 2;

            /* text-align: center; */
            &:hover {
                filter: brightness(130%);
            }
        }

        & p {
            padding: 0.5rem;
            grid-column: 2;

            &:first-of-type {
                /* grid-column: 1 /-1; */
                grid-row: 1;
                background-color: var(--c-70);
            }
        }
    }

    /* V for when theres no need for the description sidebar */
    .lightbox-default-inner-full {
        grid-template-columns: 1fr;
        justify-items: center;
        align-items: start;
        position: relative;
        gap: 0;
    }

    .lightbox-default-inner-full .overheadtext {
        position: sticky;
        inset: 0 0 auto 0;
        --ovht-bg: var(--c-70);
        --ovht-txt: var(--c-30);
        color: var(--ovht-txt);
        background-color: var(--ovht-bg);
        width: 100%;
        box-shadow: 0 0.3rem 1rem black;
    }

    .overheadtext:hover {
        opacity: 0;
        transition: opacity 0.2s;
    }

    .lightbox-default-inner .group-wrapper {
        overflow: auto;
        scrollbar-width: thin;
    }

    .lightbox-default-inner .details-box {
        background: var(--c-dark);
        border: solid 0.3rem var(--c-midlight2);
        border: solid 0.3rem var(--c-30);
        background: var(--c-70);
        border: solid 0.3rem var(--c-60);
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 8fr 2fr;
        overflow: auto;
    }

    .lightbox-default-inner .details-box> :nth-child(1):not(.exception),
    .details-box> :nth-child(2):not(.exception) {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .lightbox-default-inner .details-box:has(p ~ .group-links) {
        grid-template-rows: repeat(3, 1fr) 8fr 2fr;
    }

    .lightbox-default-inner .details-box *:not(a) {
        padding: 1rem;
        text-align: center;
    }

    .lightbox-default-inner .details-box div {
        display: grid;
        grid-template-columns: subgrid;
        padding: 0;
    }

    .lightbox-default-inner .details-box .group-links * {
        flex-grow: 3;
    }

    .lightbox-default-inner .details-box a:not(.desc-box a, p > a) {
        display: block;
        text-align: center;
        text-decoration: none;
        background-color: var(--c-a);
        /* color: var(--c-dark); */
        font-weight: bold;
        padding: 1rem;
        color: var(--c-dark);
    }

    .lightbox-default-inner .details-box div h3 {
        background-color: var(--c-mid);
        background-color: var(--c-50);
        /* margin-bottom: -1px; */
    }

    /* 'no notes given' box */
    .lightbox-default-inner .details-box div p {
        grid-column: span 2;
        background-color: var(--c-mid2);
        background-color: var(--c-70);
    }


    .lightbox-default-inner .details-box .group-links {
        display: flex;
        flex-wrap: wrap;
        flex-grow: 1;
        justify-content: center;
    }

    .lightbox-default-inner .details-box a:not(.desc-box a, p > a):hover {
        filter: brightness(120%);
    }

    .lightbox-default-inner .details-box a:not(.desc-box a, p > a) {
        display: block;
        text-align: center;
        text-decoration: none;
        background-color: var(--c-a);
        /* color: var(--c-20); */
        font-weight: bold;
        padding: 1rem;
    }

    .lightbox-default-inner .group-wrapper * {
        padding-bottom: 1rem;
        margin: 0 auto;
    }

    .lightbox-default-inner .desc-box {
        background-color: var(--c-90);
    }

    .lightbox-default-inner time {
        font-weight: bold;
        background-color: var(--c-70);

    }

    .lightbox-default-inner .details-box>p:nth-child(1) {
        background-color: var(--c-a-dark);
        color: var(--c-dark);
    }

    /* 
<input class="" id="gore-toggle" type="checkbox">
            <label class="gore-warn" for="gore-toggle">🌢︎ Gore filter </label>
            <input class="" id="sens-toggle" type="checkbox">
            <label class="sens-warn" for="sens-toggle">⚠︎ Sensitive content filter</label>
             */
    .gore-warn,
    .sens-warn {
        color: var(--c-light);
        color: var(--c-10);
        /* border-bottom: 0.2rem solid var(--c-mid); */
        /* word-wrap: break-word; */
        /* max-width: min-content; */
        /* place-self: start; */
        cursor: pointer;
        /* test */

    }

    .gore-warn::after,
    .sens-warn::after {
        /* content: '🗹'; */
        content: ' [ON]';
        padding-right: 0.3rem;
        color: rgb(203, 255, 125);
    }

    #gore-toggle:checked~.gore-warn::after,
    #sens-toggle:checked~.sens-warn::after {
        /* content: '⮽'; */
        content: ' [OFF]';
        color: rgb(230, 143, 72);
    }


    body {
        --gore-filter-vis: grid;
        --sens-filter-vis: grid;
        --both-vis: grid;
        --gore-blur: 10px;
        --sens-blur: 10px;
        --both-blur: 10px;
    }

    .gore-toggle,
    .sens-toggle {
        place-content: center;
        position: absolute;

        z-index: 2;
        color: var(--c-midlight);
        text-shadow: 0 0.1rem 0.2rem var(--c-middark);
        color: var(--c-20);
        text-shadow: 0 0.1rem 0.2rem var(--c-90);
    }


    .gore-toggle {
        display: var(--gore-filter-vis);
    }

    .sens-toggle {
        display: var(--sens-filter-vis);
    }

    .both-toggle {
        display: var(--both-vis);
        filter: blur(var(--both-blur));
    }

    /* ^ ADDED */
    body:has(#gore-toggle:checked) {
        --gore-filter-vis: none;
        --gore-blur: 0px;
    }

    body:has(#sens-toggle:checked) {
        --sens-filter-vis: none;
        --sens-blur: 0px;
    }

    .gore-toggle,
    .sens-toggle,
    .both-toggle {
        position: absolute;
        inset: 0;
        z-index: 2;
    }


    .thumbnail-default *.gore-toggle+img {
        filter: blur(var(--gore-blur));

    }

    .thumbnail-default *.sens-toggle+img {
        filter: blur(var(--sens-blur));

    }

    .thumbnail-default *.both-toggle+img,
    .thumbnail-default *.both-toggle+*+.group-mini-thumbs {
        filter: blur(var(--both-blur));

    }

    .both-toggle {
        filter: blur(var(--both-blur));
        /* display: var(--both-vis); */
    }

    /* CHECKED - HIDE BLUR
    NOT CHECKED - SHOW BLUR
*/

    /* no both  (default) */
    body:has(#sens-toggle:checked):has(#gore-toggle:not(:checked)) {
        --both-vis: grid;
        --both-blur: 10px;
    }

    body:has(#gore-toggle:checked):has(#sens-toggle:not(:checked)) {
        --both-vis: grid;
        --both-blur: 10px;
    }


    /* yes both */
    body:has(#sens-toggle:checked):has(#gore-toggle:checked) {
        --both-vis: none;
        --both-blur: 0px;
    }

    .thumbnail-default *+img {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
        position: relative;

    }

    label:has(img):hover {
        filter: brightness(150%);
        outline: solid 0.5rem var(--c-a-dark);
        /* changed to border to react with rounded corners -- fucks up layout grrr */
        /* border: solid 0.5rem var(--c-a-dark); */
        transition: all 0.2s;
        --day-opacity: 1;
    }


    .thumbnail-default .tags {
        position: absolute;
        inset: auto auto 0 0;
        z-index: 2;
        /* background-color: red; */
        /* for new svgs */

    }

    .thumbnail-default .tooltiptext {
        visibility: hidden;
        background-color: var(--c-80);
        color: #fff;
        text-align: center;
        padding: 0.5rem;
        position: absolute;
        z-index: 3;
        pointer-events: none;
        word-break: break-all;
    }


    .thumbnail-default:hover .tooltiptext {
        visibility: visible;
    }

    .thumbnail-default .tags *:hover .tooltiptext {
        visibility: visible;
    }



    .thumbnail-default .tags>* {
        background-color: var(--c-a-dark);
        font-weight: bold;
        color: var(--c-light);
        padding: 0.2rem;
    }

    .thumbnail-default .tags>*:first-child {
        border-radius: 0 0.5rem 0 0;
    }

    .sptag {
        background-color: var(--c-a);
        min-width: 1.5rem;
        height: 1.5rem;
    }


    .gore-icn,
    .sens-icn,
    .gift-icn,
    .trade-icn {
        width: 1rem;
        height: 1rem;
        display: inline;
    }



    /* ----- Lightbox stuff  end-----*/


    @media screen and (max-width:600px) {
        .lightbox-default-inner {
            grid-template-columns: 1fr;
            grid-template-rows: 1fr 1fr;
        }

    }
}